<script setup lang="ts">
import { menuDelete, menuList } from "@/services/menuApi.ts";
import { onMounted, reactive, ref, computed } from "vue";
import MenuForm from "@/pages/system/Menu/menu-form.vue";
import type { MenuListResType, MenuType } from "@/types/MenuType.ts";
import { tableBorder } from "@/utils/border/table-border.ts";
import { Message } from "@arco-design/web-vue";
import useModal from "@/hooks/useModal.ts";
import useSettingStore from "@/stores/modules/useSettingStore.ts";
import { shouldShowOperateColumn } from "@/directives/showColumn";

const { ModalShow, ModalHide } = useModal();
const { getPageIsCompact } = useSettingStore();

const rowSelection = {
  type: "checkbox",
  showCheckedAll: true,
  onlyCurrent: false,
};

const data = ref<MenuListResType[]>([]);

const formSearch = reactive({
  name: "",
});

const form = ref<{
  show: () => void;
  edit: (row: MenuListResType) => void;
  addChild: (id: string) => void;
}>();

const selectedKeys = ref<string[]>([]);

function queryData() {
  menuList(formSearch)
    .then((res) => {
      if (res.code === 200) {
        data.value = res.data;
      }
    })
    .finally(() => {
      selectedKeys.value = [];
    });
}

const handleReset = () => {
  formSearch.name = "";
  queryData();
};

const handleAdd = () => {
  form.value?.show();
};

const handleEdit = (row: MenuListResType) => {
  form.value?.edit(row);
};

const handleDelete = (row: MenuListResType) => {
  ModalShow({
    title: "提示",
    content: "您确认要删除当前菜单吗？",
  })
    .then(() => {
      menuDelete([row.id])
        .then((res) => {
          if (res.code === 200) {
            queryData();
          } else {
            ModalHide();
          }
        })
        .finally(() => {
          ModalHide();
        });
    })
    .catch(() => {
      Message.info("您取消了删除");
    });
};

const handleBatchDelete = () => {
  ModalShow({
    title: "提示",
    content: "您确认要删除选中的菜单吗？",
  }).then(() => {
    menuDelete(selectedKeys.value).then((res) => {
      if (res.code === 200) {
        Message.success(res.data);
        queryData();
        ModalHide();
      } else {
        ModalHide();
      }
    });
  });
};

const handleSelect = (e: string, row: MenuListResType) => {
  if (e === "删除") {
    handleDelete(row);
  }
  if (e === "添加下级") {
    form.value?.addChild(row.id);
  }
};

onMounted(() => {
  queryData();
});



const columns = [
  {
    title: "菜单名称",
    dataIndex: "name",
  },
  {
    title: "菜单类型",
    dataIndex: "menuType",
    slotName: "menuType",
    align: "center",
    width: 100,
  },
  {
    title: "图标",
    dataIndex: "icon",
    align: "center",
    slotName: "icon",
    width: 80,
  },
  {
    title: "组件",
    dataIndex: "component",
    slotName: "component",
  },
  {
    title: "路径",
    dataIndex: "url",
  },
  {
    title: "排序",
    dataIndex: "sortNo",
    align: "center",
    width: 80,
  },
];

const dynamicColumns = computed(() => {
  /*if (shouldShowOperateColumn(["edit", "addSubordinates", "delete"], 3)) {
    return [
      ...columns,
      {
        title: "操作",
        slotName: "operate",
        align: "center",
        width: 150,
      },
    ];
  } else {
    return columns;
  }*/
  return [
    ...columns,
    {
      title: "操作",
      slotName: "operate",
      align: "center",
      width: 150,
    },
  ];
});

function getMenuTypeName(menuType: MenuType): string {
  if (menuType === 0) {
    return "目录";
  } else if (menuType === 1) {
    return "菜单";
  } else {
    return "按钮权限";
  }
}
</script>

<template>
  <a-space
    class="container"
    direction="vertical"
    :size="getPageIsCompact()"
  >
    <!-- 表单查询 -->
    <a-card>
      <a-form
        label-align="left"
        auto-label-width
      >
        <a-row :gutter="24">
          <a-col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :xl="6"
            :xxl="6"
          >
            <a-form-item label="菜单名称">
              <a-input
                allow-clear
                placeholder="请输入菜单名称"
                v-model="formSearch.name"
              />
            </a-form-item>
          </a-col>
          <a-col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :xl="6"
            :xxl="6"
          >
            <a-space>
              <a-button
                type="primary"
                @click="queryData"
                style='user-select: none;'
              >
                <template #icon>
                  <icon-search />
                </template>
                <span>查询</span>
              </a-button>
              <a-button @click="handleReset" style='user-select: none;'>
                <template #icon>
                  <icon-refresh />
                </template>
                <span>重置</span>
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <!-- 表格 -->
    <a-card>
      <div class="tabletools">
        <a-space>
          <a-button
            type="primary"
            @click="handleAdd"
            v-has="'add'"
          >
            <template #icon>
              <icon-plus />
            </template>
            <span>新增</span>
          </a-button>
          <a-button
            v-has="'batchdelete'"
            status="danger"
            type="primary"
            :disabled="selectedKeys.length === 0"
            @click="handleBatchDelete"
          >
            <template #icon>
              <icon-delete />
            </template>
            <span>批量删除</span>
          </a-button>
        </a-space>
      </div>
      <a-table
        style="user-select: none;"
        :data="data"
        :columns="dynamicColumns"
        :bordered="tableBorder"
        row-key="id"
        :pagination="false"
        :row-selection="rowSelection"
        v-model:selected-keys="selectedKeys"
      >
        <template #icon="{record}">
          <component v-if="record.icon" :is="record.icon" :size="18" />
        </template>
        <template #component="{record}">
          <span v-if="record.menuType !== 2">{{ record.component }}</span>
          <span v-else>{{ record.perms }}</span>
        </template>
        <template #menuType="{ record }">
          {{ getMenuTypeName(record.menuType) }}
        </template>
        <template #operate="{ record }">
          <a-space>
            <a-button
              v-has="'edit'"
              type="primary"
              @click="handleEdit(record)"
            >
              <span>编辑</span>
            </a-button>

            <a-dropdown @select="(e: string) => handleSelect(e, record)">
              <a-button
                v-more="{
                    list: ['addSubordinates', 'delete'],
                    len: 2
                  }"
                type="primary"
                status="warning"
              >
                <span>更多</span>
                <icon-down />
              </a-button>
              <template #content>
                <!-- v-has="'addSubordinates'" -->
                <a-doption v-has="'addSubordinates'">添加下级</a-doption>
                <a-doption v-has="'delete'">删除</a-doption>
              </template>
            </a-dropdown>
          </a-space>
        </template>
      </a-table>
    </a-card>
    <menu-form
      ref="form"
      @list="queryData"
    />
  </a-space>
</template>

<style scoped lang="scss">
:deep(.arco-dropdown-open) {
  .arco-icon-down {
    transform: rotate(180deg);
  }
}
</style>
